import { useEffect, useMemo, useState } from 'react'
import classes from './index.module.scss'
import { NavBar, DatePicker } from 'antd-mobile'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useStore } from '@/store'
import _ from 'lodash'
import DayBill from './components/DayBill'

const Mouth = () => {
  const { bills } = useStore()
  // 数据按时间分组
  const mouthGroup = useMemo(() => {
    return _.groupBy(bills, (item) => dayjs(item.date).format('YYYY-MM'))
  }, [bills])
  const [currentMonthList, setMonthList] = useState([])
  const [currentMonth, setCurrentMonth] = useState(() => {
    return dayjs().format('YYYY-MM')
  })
  // 计算总账
  const { pay, incme, total } = useMemo(() => {
    if (currentMonthList) {
      let pay = currentMonthList
        .filter((item) => item.type === 'pay')
        .reduce((pre, item) => pre + item.money, 0)
      let incme = currentMonthList
        .filter((item) => item.type === 'income')
        .reduce((pre, item) => pre + item.money, 0)
      return { pay, incme, total: pay + incme }
    } else {
      return { pay: 0, incme: 0, total: 0 }
    }
  }, [currentMonthList])

  // 控制时间选择器打开关闭
  const [dateVisible, setDateVisible] = useState(false)
  // 时间选择框确实事件
  const dateConfirm = (date) => {
    // 时间格式化
    const month = dayjs(date).format('YYYY-MM')
    setMonthList(mouthGroup[month])
    setCurrentMonth(month)
    // 关闭弹框
    setDateVisible(false)
  }

  // 实时显示当天总账数据
  useEffect(() => {
    const nowDate = dayjs().format('YYYY-MM')
    if (mouthGroup[nowDate]) {
      setMonthList(mouthGroup[nowDate])
    }
  }, [mouthGroup])

  // 根据当日数据分组
  const { groupData, keys } = useMemo(() => {
    const groupData = _.groupBy(currentMonthList, (item) => dayjs(item.date).format('YYYY-MM-DD'))
    const keys = Object.keys(groupData)
    return {
      groupData,
      keys
    }
  }, [currentMonthList])

  return (
    <div className={classes.mouth}>
      <NavBar className={classes.nav} backArrow={false}>
        月度收支
      </NavBar>
      <div className={classes.content}>
        <div className={classes.header}>
          {/* 时间切换区域 */}
          <div className={classes.date} onClick={() => setDateVisible(true)}>
            <span className={classes.text}>{currentMonth} 账单</span>
            <span className={classNames(classes.arrow, dateVisible && classes.expand)}></span>
          </div>
          {/* 统计区域 */}
          <div className={classes.twoLineOverview}>
            <div className={classes.item}>
              <span className={classes.money}>{pay.toFixed(2)}</span>
              <span className={classes.type}>支出</span>
            </div>
            <div className={classes.item}>
              <span className={classes.money}>{incme.toFixed(2)}</span>
              <span className={classes.type}>收入</span>
            </div>
            <div className={classes.item}>
              <span className={classes.money}>{total.toFixed(2)}</span>
              <span className={classes.type}>结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className={classes.ddwDate}
            title="记账日期"
            precision="month"
            visible={dateVisible}
            max={new Date()}
            onClose={() => {
              setDateVisible(false)
            }}
            onConfirm={dateConfirm}
            onCancel={() => {
              setDateVisible(false)
            }}
          />
        </div>
        {keys.map((key) => (
          <DayBill key={key} date={key} billList={groupData[key]} />
        ))}
      </div>
    </div>
  )
}

export default Mouth
